<template>
  <span :class="classMap[type]"></span>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      type: {
        type: Number
      },
      size: {
        type: Number
      }
    },
    created() {
      this.classMap = [
        'decrease_' + this.size,
        'discount_' + this.size,
        'special_' + this.size,
        'invoice_' + this.size,
        'guarantee_' + this.size
      ]
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  @import "./../../common/less/mixins";

  &.decrease_1 {
    .bg-images('../images/header/decrease_1')
  }

  &.discount_1 {
    .bg-images('../images/header/discount_1')
  }

  &.guarantee_1 {
    .bg-images('../images/header/guarantee_1')
  }

  &.invoice_1 {
    .bg-images('../images/header/invoice_1')
  }

  &.special_1 {
    .bg-images('../images/header/special_1')
  }

  /*******************************/

  &.decrease_2 {
    .bg-images('../images/header/decrease_2')
  }

  &.discount_2 {
    .bg-images('../images/header/discount_2')
  }

  &.guarantee_2 {
    .bg-images('../images/header/guarantee_2')
  }

  &.invoice_2 {
    .bg-images('../images/header/invoice_2')
  }

  &.special_2 {
    .bg-images('../images/header/special_2')
  }

  /*******************************/

  &.decrease_3 {
    .bg-images('../images/header/decrease_3')
  }

  &.discount_3 {
    .bg-images('../images/header/discount_3')
  }

  &.guarantee_3 {
    .bg-images('../images/header/guarantee_3')
  }

  &.invoice_3 {
    .bg-images('../images/header/invoice_3')
  }

  &.special_3 {
    .bg-images('../images/header/special_3')
  }
</style>
